<template>
  <el-dialog v-model="showModel" title="选择优惠券" width="1100px" @opened="handleOpened" >
    <div class="search">
      <el-form :model="searchForm" inline>
        <el-form-item label="优惠券名称">
          <el-input v-model="searchForm.couponName" clearable placeholder="请输入优惠券名称" />
        </el-form-item>
        <el-form-item label="优惠券ID">
          <el-input v-model="searchForm.couponId" clearable placeholder="请输入优惠ID" />
        </el-form-item>
        <el-form-item label="批次名称">
          <el-input v-model="searchForm.couponBatchName" clearable placeholder="请输入批次名称" />
        </el-form-item>
      </el-form>
    </div>

    <LayoutTable :hide-watch="true" ref="tableRef" :set-search="setSearch"
    url="mall/admin/product/getPageCouponProduct" :param="searchForm" :hide-init="true">
      <el-table-column label="优惠券ID" width="120" prop="id" />
      <el-table-column label="优惠券名称" width="200" prop="couponName" />
      <el-table-column label="批次名称" width="200" prop="name" />
      <el-table-column label="售价" width="140">
        <template #default="props">
          {{ `${props.row.payOfCurrencyCount || 0}${props.row.currencyName||'积分'}+${setMoneyConfig(props.row.payPrice)}` }}
        </template>
      </el-table-column>

      <el-table-column label="剩余数量" width="160">
        <template #default="{ row }">
          {{ (row?.couponTotalNum ?? 0) - (row?.couponReceiveNum ?? 0) }}
        </template>
      </el-table-column>

      <!-- <el-table-column label="领取时间" width="210">
        <template #default="props">
          <div class="claim-time-range" :class="{ 'outof-claim-time-range': checkOutofTimeRange(props.row) }">
            <div>{{ formatTime(props.row.receiveStartTime) }} 至</div>
            <div>{{ formatTime(props.row.receiveEndTime) }}</div>
          </div>
        </template>
      </el-table-column> -->

      <el-table-column label="创建时间" width="180">
        <template #default="{ row }">
          {{ formatTime(row.createTime) }}
        </template>
      </el-table-column>

      <!-- <el-table-column label="是否上架" width="180">
        <template #default="{ row }">
          {{ row.onlineStatus ? "是" : "否" }}
        </template>
      </el-table-column> -->

      <el-table-column label="操作" fixed="right" width="100">
        <template #default="{ row }">
          <el-button type="primary" @click="confirm(row)">
            选择
          </el-button>
        </template>
      </el-table-column>
    </LayoutTable>

    <template #footer>
      <el-button @click="showModel = false">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { useMallConfig } from "@/views/pointsMall/compositions/useMallConfig";
import { debounce } from "@/utils";
import { setMoneyConfig } from "@/utils";
import type { ICouponSelectorRow } from "@/api/modules/marketingTool"
import moment from "moment"

const props = defineProps<{
  show: boolean;
  url: string;
}>()

const emits = defineEmits<{
  (e: "update:show", value: boolean): void;
  (e: "confirm", value: ICouponSelectorRow): void;
}>()


const showModel = computed({
  get() {
    return props.show
  },
  set(value) {
    emits("update:show", value)
  }
})

const { mallConfig } = useMallConfig();
const searchForm = reactive({
  couponName: "",
  couponId: "",
  couponBatchName: "",
  mallId:mallConfig.value.id
})

const formatTime = (timestamp: number) => {
  return timestamp ? moment(timestamp).format("YYYY.MM.DD HH:mm:ss") : ''
}

const confirm = (row: ICouponSelectorRow) => {
  emits("confirm", row)
}
watch(searchForm,()=>{
  search()
})
const setSearch=ref(0)

const search = debounce(() => {
  setSearch.value++
}, 700, false)

const handleOpened = () => {
  setSearch.value=0
  searchForm.couponBatchName=''
  searchForm.couponId=''
  searchForm.couponName=''
  search()
}
</script>

<style scoped lang="scss"></style>